<template>
  <div class="app-container home">
    <el-collapse v-model="activeNames" :accordion="true" @change="handleChange">

      <el-collapse-item title="待办事项" name="1">
        <el-table v-loading="loading" :data="waitList">
          <el-table-column label="ID" prop="id"/>
          <el-table-column label="事项名" prop="processDefinitionName"/>
          <el-table-column label="进度" prop="name"/>
          <el-table-column label="时间" prop="createTime"/>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-add"
                @click="handleAudit(scope.row)"
              >审批</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-add"
                @click="handleCancleRenLing(scope.row)"
              >取消认领</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>

      <el-collapse-item title="公共事项" name="2">
        <el-table v-loading="loading" :data="publicList">
          <el-table-column label="ID" key="id" prop="id"/>
          <el-table-column label="事项名" prop="processDefinitionName"/>
          <el-table-column label="进度" prop="name"/>
          <el-table-column label="时间" prop="createTime"/>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-add"
                @click="handleRenLing(scope.row)"
              >认领</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>

      <el-collapse-item title="个人申请" name="3">
        <el-table v-loading="loading" :data="list">
          <el-table-column label="ID" key="taskId" prop="taskId"/>
          <el-table-column label="事项名" prop="taskName">
            <template scope="scope">
              <div style="color:#ff0000;text-decoration:underline;cursor:pointer;" @click="getProcess(scope.row)">{{ scope.row.taskName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" prop="startTime"/>
          <el-table-column label="结束时间" prop="endTime"/>
        </el-table>
      </el-collapse-item>

    </el-collapse>

    <el-dialog :title="process.title" :visible.sync="process.open" width="500px" append-to-body>
      <el-table :data="processList">
        <el-table-column label="进度" key="taskName" prop="taskName"/>
        <el-table-column label="操作人" prop="assignee"/>
        <el-table-column label="开始时间" prop="startTime"/>
        <el-table-column label="结束时间" prop="endTime"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'

  export default {
  name: "index",
  data() {
    return {
      activeNames: "1",
      loading:false,
      waitList:[],
      list:[],
      publicList:[],
      process:{
        title:'',
        open:false
      },
      processList:[]
    };
  },
  created(){
    //this.myList();
    this.getWaitList();
    //this.searchPublicList();
  },
  methods: {
    myList(){
      let param = {"pageNum":1, "pageSize":999};
      this.loading = true;
      mylist(param).then(response => {
        this.list = response.data.rows;
        this.loading = false;
      })
    },
    getWaitList(){
      let param = {"pageNum":1, "pageSize":999};
      this.loading = true;
      waitlist(param).then(response => {
        this.waitList = response.data;
        this.loading = false;
      })
    },
    searchPublicList(){
      let param = {"pageNum":1, "pageSize":999};
      this.loading = true;
      publiclist(param).then(response => {
        this.publicList = response.data;
        this.loading = false;
      })
    },
    handleRenLing(row){
      this.loading = true;
      renling(row.id).then(response => {
        this.msgSuccess(response.msg);
        this.loading = false;
        this.refreshAll();
      })
    },
    handleCancleRenLing(row){
      this.loading = true;
      canclerenling(row.id).then(response => {
        this.msgSuccess(response.msg);
        this.loading = false;
        this.refreshAll();
      })
    },
    handleAudit(row){
      this.loading = true;
      audit(row.id).then(response => {
        this.msgSuccess(response.msg);
        this.loading = false;
        this.refreshAll();
      })
    },
    getProcess(row){
      this.process = {
        title:'进度详情',
        open:true
      }
      process(row.processInstanceId).then(response => {
        this.processList = response.data;
      })
    },
    handleChange(val) {
      if (val == 1){
        this.getWaitList();
      }
      if (val == 2){
        this.searchPublicList();
      }
      if (val == 3){
        this.myList();
      }
    },
    refreshAll(){
      this.myList();
      this.getWaitList();
      this.searchPublicList();
    }
  }
};

  function waitlist(query) {
    return request({
      url: '/activiti/task/my/waitlist',
      method: 'get',
      params: query
    })
  };

  function publiclist(query) {
    return request({
      url: '/activiti/task/public/list',
      method: 'get',
      params: query
    })
  }

  function mylist(query) {
    return request({
      url: '/activiti/task/my/list',
      method: 'get',
      params: query
    })
  }

  function process(id) {
    return request({
      url: '/activiti/task/process/'+id,
      method: 'get'
    })
  }

  function renling(id) {
    return request({
      url: '/activiti/task/renling/'+id,
      method: 'post'
    })
  }

  function canclerenling(id) {
    return request({
      url: '/activiti/task/cancle_renling/'+id,
      method: 'post'
    })
  }

  function audit(id) {
    return request({
      url: '/activiti/task/audit/'+id,
      method: 'post'
    })
  }
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

